<template>
  <nav-bar :has-back="!isRootPath">{{ isRootPath ? '导航页' : navBarTitle }}</nav-bar>
  <div class="container">
    <router-view></router-view>
  </div>
</template>

<script>
import routes from '@/routes'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'App',
  data() {
    return {
      routes,
    }
  },
  provide() {
    return {
      app: this,
      ok: { a: 1, b: 2, c: 3 },
    }
  },
  created() {
    console.log('App', this)
  },
  setup() {
    const router = useRouter()
    const currentRoute = computed(() => router.currentRoute.value)
    const isRootPath = computed(() => currentRoute.value.path === '/')
    const navBarTitle = computed(() => currentRoute.value.name)

    return {
      currentRoute,
      isRootPath,
      navBarTitle,
    }
  },
}
</script>
